<template>
  <div class="bg">
       <div class="zhua"></div>
      <div class="m-song-light a-circling">
           <div class="imgc">
        <img
          :src="imgsrc" alt=""
        />
      </div>
      </div>
      <div class="box">
          <button><a href="https://m.music.163.com/m/applink/?scheme=orpheus%3A%2F%2Fsong%2F1836350568">打开</a></button>
          <button><a href="">下载</a></button>
      </div>
  </div>
</template>
<script>
export default {
  name: "Cricle",
  data(){
      return{
          imgsrc:"http://p2.music.126.net/usVRErrKKby-qx7-AKfTlg==/109951166654342138.jpg?imageView&thumbnail=360y360&quality=75&tostatic=0"
      }
  }
};
</script>
<style lang="less" scoped>
.box {
    margin-top: 200px;
    display: flex;
    justify-content: space-around;
}
.box button{
    
    border-radius: 1rem;
    width: 48%;
    height: 40px;
}
.box button:nth-child(1){
    border: 1px solid red;
    background: rgb(46, 46, 45);
}
.box button:nth-child(2){
    border: 1px solid red;
    background-color:red;
}
a{
     color: red;
}
.box button:nth-child(2) a{
    color: #fff;
}
.bg{
    width: 100vw;
    height: 400px;
    background: rgb(46, 46, 45);
}
.m-song-light {
  width: 247px;
  height: 247px;
  // background: #000;
//   border: 1px solid red;
  background: url("../assets/cricle.png") no-repeat center center;
  background-size: 100% 100%;
  animation: turn linear 8s infinite;
  -webkit-animation:turn linear 3s infinite;
  position: relative;
  left: 50%;
  top: 9%;
  margin-left: -124px;
}
.zhua{
    width: 73px;
    height: 118px;
    background: url("https://s3.music.126.net/mobile-new/img/needle-ab.png?4b81da043356110081e5ccaed2e6f2ad=")no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 50%;
    // margin:  0 0 0 -36px;
    z-index: 999;

}
@keyframes turn {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes turn /* Safari and Chrome */ {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.imgc {
  width: 184px;
  height: 184px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  margin: -92px 0 0 -92px;
}
.imgc img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -76px 0 0 -75px;
}
</style>